<template>
	<div class="wrapper">
		<div id="header">
			<div class="back" v-on:click='goback()'></div>
			<h2 class="header-title">{{casts.name_en}} {{casts.name}}</h2>
		</div>
		<loading v-if='loading'></loading>
		<div id="actor" v-if='!loading'>
			<div class="left"><img v-bind:src="casts.avatars.medium"></div>
			<div class="right">
				<h2>影星资料</h2>
				<p class="cn-name">{{casts.name}}</p>
				<p class="e-name">{{casts.name_en}}</p>
				<p class="sex">{{casts.gender}}</p>
			</div>
		</div>
		<h3 class="title" v-if='!loading'>他的代表作品</h3>
		<ul id="move_list" v-if='!loading'>
		     <li class="list_item" v-for='work in casts.works' v-on:click='goMovie(work.subject.id)'>
		       <div class="item_left"><img alt="" v-bind:src="work.subject.images.small"></div>
		       <div class="item_right">
		       		<p>{{work.subject.title}}</p>
		         	<p><span class="roles" v-for='role in work.roles'>{{role}}</span></p>
		         	<p class="year">{{work.subject.year}}</p>
			        <star v-bind:num="work.subject.rating.stars"></star>
			        <p class="score">{{work.subject.rating.average}}分 <span>{{work.subject. collect_count}}人评价</span></p>
			        
		       </div>
		     </li>
   		</ul>
	</div>
</template>

<script>
	import loading from './loading'
	import star from './star'
	export default{
		data(){
			return{
				casts:[],
				loading:true
			}
		},
		components:{
		    loading:loading,
		    star:star
		},
		mounted:function(){
			var id = this.$route.params.id;
			this.$http.jsonp("https://api.douban.com/v2/movie/celebrity/"+id+"?apikey=0b2bdeda43b5688921839c8ecb20399b").then(function(response){
  		    		this.casts=response.body
  		    		this.loading=false		
			})
		},
		methods:{
			goback:function(){
				this.$router.go(-1)
			},
			goMovie:function(id){
				this.$router.push({path:'/movie/'+id})
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		background-color: #e5e9f2;
	}
	#header{
		display: flex;
	    height: 50px;
	    width: 100%;
	    background-color: #e54847;
	    padding: 6px;
	    box-sizing: border-box;
	    position: relative;
	}
	#header .back{
		position: absolute;
		top: 18px;
		left: 15px;
		height: 13px;
	    width: 13px;
	    border: 2px solid #fff;
	    border-width: 0 0 2px 2px;
	    transform: rotate(45deg);
	}
	#header h2{
		margin: auto;
		color: #fff;
    	font-size: 20px;
	}
	#actor{
		color: #6b6868;
    	background-color: #b4b1b1;
    	padding: 15px;
    	display: flex;
    	align-items: flex-end;
    	color: #fff;
	}
	#actor .left{
		float: left;
		margin-right: 20px;
	}
	#actor .left img{
		align-items: flex-end;
	}
	
	#actor .right h2{
		font-size: 25px;
		margin-bottom: 20px;
    
	}
	#actor .right p{
		font-size: 20px;
    	margin-top: 8px;
	}

	h3.title{
		color: #333;
	    font-size: 18px;
	    margin-bottom: 10px;
	    margin-left: 20px;
	    margin-top: 20px;
	}
	.list_item{
    margin: 0 20px;
    padding: 10px 0;
    border-bottom: 1px solid #d6d6d6;
    display: flex;
    align-items: flex-end;
  }
  .list_item .item_left{
    float: left;
    margin-right: 20px;
  }
  .item_right{
    font-size: 14px;
    color: #666;
    line-height: 20px;
  }
  .item_right h2{
    font-size: 20px;
    margin-bottom: 20px;
  }
  .actor span{
    margin-right:5px;
  }
  p span.roles{
  	padding-right:3px;
  }
</style>